<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">快速操作</h2>
      <button class="text-primary text-sm hover:underline" @click="customizeQuickActions">自定义</button>
    </div>
    <div class="p-4">
      <div class="grid grid-cols-3 gap-4">
        <a href="#"
          class="flex flex-col items-center justify-center p-3 border border-gray-100 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors"
          v-for="(action, index) in quickActions" :key="index"
          @click.prevent="handleQuickAction(action.name)">
          <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2">
            <i :class="action.iconClass + ' text-xl'"></i>
          </div>
          <span class="text-sm text-center">{{ action.name }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quickActions: [
        { name: '新建实例', iconClass: 'fa fa-plus' },
        { name: '资源监控', iconClass: 'fa fa-line-chart' },
        { name: '工单提交', iconClass: 'fa fa-ticket' },
        { name: '备份管理', iconClass: 'fa fa-database' },
        { name: '安全组', iconClass: 'fa fa-shield' },
        { name: '帮助中心', iconClass: 'fa fa-question-circle' }
      ]
    };
  },
  methods: {
    customizeQuickActions() {
      // 自定义快速操作逻辑
      console.log('自定义快速操作');
    },
    handleQuickAction(actionName) {
      // 处理快速操作点击
      console.log('执行快速操作:', actionName);
    }
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.hover\:border-primary:hover {
  border-color: #3b82f6;
}
.hover\:bg-primary\/5:hover {
  background-color: rgba(59, 130, 246, 0.05);
}
.transition-colors {
  transition: all 0.2s ease;
}
</style>